<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui的表单</title>
    <!--引入layui的核心css文件-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <!--layui的核心js文件（采用模块化引入）-->
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
  表单 
    常用属性：
        required     浏览器固定的必填字段
        lay-verify   需要验证的类型（required表示必填项）
        class="layui-input" 提供的通用样式
        class="layui-input-block"  占据整行的宽度
        class="layui-input-inline" 占据整行的宽度
    文本框
      placeholder  当文本框为空时，默认显示的文本信息
      autocomplete 表单元素是否自动填充（当浏览器中缓存中存在相同name属性的值时，会填充）
    通过追加class="layui-form-pane"的class，来设定表单的方框风格

-->


  <form action="" class="layui-form layui-form-pane">
	  
	  
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-inline">

        <!--
          下拉选择框
            1、通过selected属性设置默认选中项
            2、通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）

        -->
        <select id="city" name="city" <!-- lay-verify="required" --> >
          <option value="">请选择一个城市</option>
          <option value="010">北京</option>
          <option value="021">上海</option>
          <option value="0571" disabled>杭州</option>
        </select>
       
        <!--分组-->

        <select name="quiz" lay-verify="required" >
          <option value="">请选择</option>
          <optgroup label="城市记忆">
            <option value="你工作的第一城市">北京？</option>
          </optgroup>
          <optgroup label="学生时代">
            <option value="你的工号">9527？</option>
            <option value="你最喜欢的老师">英语？</option>
          </optgroup>

        </select>


                <!--开启搜索匹配-->

                <select name="city" lay-verify="required" lay-search>
                  <option value="">请选择一个城市</option>
                  <option value="010">北京</option>
                  <option value="021">上海</option>
                  <option value="0571" disabled>杭州</option>
        
                </select>
      </div>
  </div>
      
  
      <!--
        复选框
          1、通过title属性设置自定义文本（如果不需要现实文本，则不设置title属性）
          2、通过checked属性设置被选中的项
          3、通过lay-skin属性设置复选框的样式效果（lay-skin="primary" 表示原始效果）
          4、通过disabled属性禁用元素
      
      -->
  <div class="layui-form-item">
    <label class="layui-form-label">爱好</label>
    <div class="layui-input-block">
        <input type="checkbox" name="hobby" title="唱歌" checked>
        <input type="checkbox" name="hobby" title="跳舞">
        <input type="checkbox" name="hobby" title="Rap">
        <br>
        <input type="checkbox" name="hobby" title="唱歌" value="sing" lay-skin="primary"> 
        <input type="checkbox" name="hobby" title="跳舞" value="dance" lay-skin="primary" disabled> 
        <input type="checkbox" name="hobby" title="Rap" value="rap" lay-skin="primary" checked> 
    </div>
</div>
    

    <!--开关
          将复选框，设置lay-skin="switch"形式开关风格
          1、通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分割
          2、通过checked设置默认打开状态
          3、通过disabled属性禁用开关
          4、通过value属性设置选中的值   
    -->
    <div class="layui-form-item">
      <label class="layui-form-label">开关</label>
      <div class="layui-input-inline">
        <input type="checkbox"  lay-skin="switch">
        <input type="checkbox" checked lay-skin="switch">
        <input type="checkbox" checked lay-skin="switch" lay-text="on|off">
      </div>
  </div>

  
    <!--单选框
        
          1、通过checked设置默认选中项
          2、通过disabled属性禁用开关
          3、通过value属性设置选中的值   
    -->
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="0" title="男" lay-ignore>
        <input type="radio" name="sex" value="1" title="女" checked>
        <input type="radio" name="sex" value="2" title="中性" disabled>
      </div>
  </div>


    
    <!--文本域
           class="layui-textarea":layui.css提供的通用css类
    -->
    <div class="layui-form-item">
      <label class="layui-form-label">简介</label>
      <div class="layui-input-block">
        <textarea name="remark" required lay-verify="required"  placeholder="请输入个人简介"
        class="layui-textarea"></textarea>
     
      </div>
  </div>

    <!--组装行内表单-->
    <div class="layui-form-item" pane>
      <div class="layui-inline">
          <label class="layui-form-label">组装行内</label>
          <div class="layui-input-inline">
              <input type="text" name="price_min" class="layui-input" placeholder="￥">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline">
            <input type="text" name="price_max" class="layui-input" placeholder="￥" class="layui-input" lay-ignore> 
        </div>
      </div>
      <hr\><br>
      <div class="layui-inline">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">

          <input type="radio" name="sex" value="0" title="男" >
          <input type="radio" name="sex" value="1" title="女" checked >
      </div>
      </div>
  </div>

      <!--组装行内表单-->
      <div class="layui-form-item" pane>
        <div class="layui-inline">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
  
            <input type="radio" name="sex" value="0" title="男" >
            <input type="radio" name="sex" value="1" title="女" checked >
        </div>
        </div>
    </div>



    <!--提交按钮-->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>


  </form>


<div class="layui-form layui-form-item">
      <div class="layui-input-inline">
        <select id="city2" name="city" <!-- lay-verify="required" --> >
          <option value="">请选择一个城市</option>
          <option value="010">北京</option>
          <option value="021">上海</option>
          <option value="0571" disabled>杭州</option>
        </select>
		</div>
</div>

<button class="layui-btn" onclick="addOptions();">添加下拉框</button>

<script>
    var rendlayui=layui.use("form",function(){
   //    var form=layui.form;
	  // form.render();
    });
	
	function addOptions(){
		var music=document.getElementById("city2");
		var opt="<option value='371' >郑州</option>";
		music.innerHTML+=opt;
		var form=layui.form;
		form.render();
	}

</script>
</body>

</html>